<template>
    <view class="container">
        <form @submit="savePloitecar" report-submit>
            <view class="case">
                <view class="casetitle">
                    <view></view>
                    <view>举报类型</view>
                </view>

                <view class="caselist">
                    <radio-group @change="radioChange">
                        <view class="item">
                            <radio value="0"></radio>
                            <text>虚假信息</text>
                        </view>

                        <view class="item">
                            <radio value="1"></radio>
                            <text>广告</text>
                        </view>

                        <view class="item">
                            <radio value="2"></radio>
                            <text>其他</text>
                        </view>
                    </radio-group>
                </view>

                <view class="casetitle">
                    <view></view>
                    <view>举报理由</view>
                </view>

                <view class="casecontent">
                    <textarea placeholder="请填举报理由" name="content"></textarea>
                </view>

                <view class="casebtn">
                    <button formType="submit">提交</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Ploite } from '../../model/ploite-model.js';
var ploite = new Ploite();
export default {
    data() {
        return {
            type: 0,
            carid: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;
        uni.setNavigationBarTitle({
            title: '信息举报'
        });
        that.carid = options.id;
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        radioChange: function (e) {
            this.type = e.detail.value;
        },

        savePloitecar: function (e) {
            var that = this;
            var content = e.detail.value.content;
            var type = that.type;
            var carid = that.carid;
            if (content == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入举报理由',
                    showCancel: false
                });
                return;
            }
            var params = {
                content: content,
                type: type,
                pid: carid
            };
            ploite.savePloite((data) => {
                if (data.status == 0) {
                    uni.showModal({
                        title: '提示',
                        content: '举报成功',
                        showCancel: false,
                        success: function () {
                            uni.navigateBack({
                                delta: 1
                            });
                        }
                    });
                } else {
                    uni.showModal({
                        title: '提示',
                        content: '举报失败',
                        showCancel: false
                    });
                    return;
                }
            }, params);
        }
    }
};
</script>
<style>
page {
    background-color: #ffffff;
}
.container {
    background-color: #ffffff;
    min-height: 100%;
}

.casetitle {
    width: 700rpx;
    height: 80rpx;
    line-height: 80rpx;

    font-size: 0.7rem;
    border-bottom: 1rpx solid #efefef;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-content: center;
    padding-left: 5rpx;
}
.casetitle view:nth-child(1) {
    height: 30rpx;
    line-height: 30rpx;
    width: 8rpx;
    background: #fd4e31;
    align-self: center;
}
.casetitle view:nth-child(2) {
    height: 80rpx;
    line-height: 80rpx;
    width: 150rpx;
    padding-left: 15rpx;
    font-size: 13px;
    font-weight: 600;
    color: #5f5e63;
}

.caselist {
    display: flex;
    flex-direction: column;
    width: 700rpx;
    padding: 20rpx;
}

.caselist .item {
    padding: 10rpx;

    border-bottom: 1rpx solid #f9f9f9;
}
.caselist .item text {
    margin-left: 20rpx;
}

.casecontent textarea {
    padding-right: 5%;
    width: 700rpx;
    padding-left: 5%;

    height: 250rpx;
    margin-top: 20rpx;
    font-size: 12px;
    color: #333;
}
.casebtn button {
    text-align: center;

    width: 90%;
    margin-left: 5%;
    line-height: 80rpx;
    background: #b2b2b2;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #ffffff;
    height: 80rpx;

    background: #eb4f38;
}
</style>
